<style lang="less">
  .login-wrap {
    padding: 0 0.3rem;
  }

  .w100 {
    width: 100%;
  }
</style>
<template>
  <div class="contain">
    <div class="loader-base" v-if="showLoad">
      <div class="loader-wrap"></div>
    </div>
    <ul class="login-wrap">
      <li class="displayflex">
        <span class="iconfont icon-pcclass"></span>
        <div class="displayflex w100">
          <popup-picker class="picker-wrap" title="项目" :data="projectlist" placeholder="点击选择" value-text-align="right"
                        :show-name="showName" v-model="project"></popup-picker>
          <i class="iconfont icon-cc-right"></i>
        </div>
      </li>
      <div v-if="!hasQrCode" class="agbtn btn-info" style="display:block; height:45px; line-height:45px;"
           @click="createQrCode">
        获取二维码
      </div>
      <div style="width:100%;height:320px;display:flex;justify-content:center;align-items:center">
        <div id="qrcode">
        </div>
      </div>
      <div v-if="hasQrCode" style="text-align: center;">
        长按保存到手机
      </div>
    </ul>
  </div>
</template>

<script>
  import QRCode from 'qrcodejs2'

  export default {
    data() {
      return {
        showLoad: false,
        showName: true,
        hasQrCode: false,
        projectVal: '',
        project: [],
        projectlist: [
          [
            {
              value: "http://wx.yilaibaobei.com/wx.html",
              name: "阳光喔"
            }
          ]
        ]
      }
    },
    watch: {
      project(n) {
        this.projectVal = n[0];
      }
    },
    methods: {
      createQrCode() {
        if (this.projectVal === '') {
          this.$vux.toast.show({
            type: "warn", //success, warn, cancel, text
            text: "请选择项目"
          });
          return false;
        }
        this.hasQrCode = true;
        let qrcode = new QRCode('qrcode', {
          width: 300,
          height: 300, // 高度
          text: this.projectVal + '?state=' + this.$route.query.code // 二维码内容
          // render: 'canvas' // 设置渲染方式（有两种方式 table和canvas，默认是canvas）
          // background: '#f0f'
          // foreground: '#ff0'
        })
      }
    },
    created() {
    }
  }
</script>

